<!--
 * @Description: 表格
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-22 14:09:49
 * @LastEditTime: 2021-09-28 10:13:04
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="tao-table" :class="{'hide-scroll-bar': hideScrollBar}">
    <el-table
      ref="table"
      border
      row-key="id"
      :data="data || tableData"
      :height="height"
      :row-class-name="tableRowClassName"
      :header-cell-style="{ background: headBg, color: '#666' }"
      :fit="true"
      :size="size"
      :style="{ marginBottom: Bottom + 'px' }"
      style="width: 100%; font-size: 14px"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="序号" v-if="isOrder" align="center">
        <template slot-scope="scope">
          <span>{{scope.$index + (pageData.current_page - 1) * pageData.per_page + 1 }}</span>
        </template>
      </el-table-column>

      <!-- 插槽 -->
      <slot></slot>

      <!-- 筛选 -->
      <el-table-column
        v-if="status"
        :prop="statusProp"
        :label="statusTitle"
        :width="isStatus ? '90' : ''"
        :filters="[
          { text: '已启用', value: 1 },
          { text: '已禁用', value: 0 },
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            size="mini"
            effect="light"
            :type="scope.row[statusProp] === 1 ? 'success' : 'info'"
            disable-transitions
          >{{ scope.row[statusProp] === 1 ? "已启用" : "已禁用" }}</el-tag>
        </template>
      </el-table-column>

      <!-- 没有数据 -->
      <div slot="empty" class="empty" style="padding: 20px 0">
        <div v-if="showEmptyTips">
          <i class="iconfont">&#xe707;</i>
          <p>{{ emptyText }}</p>
        </div>
      </div>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :small="small"
      background
      :page-size="page.pageSize"
      :total="page.total"
      :page-sizes="[15, 25, 50]"
      :current-page.sync="page.page"
      @current-change="changePage"
      @size-change="changeSize"
      :layout="pageLaout"
      :hide-on-single-page="hideOnePage"
      v-if="showPage && page.total > 0"
    />
  </div>
</template>

<script>
export default {
  name: 'TaoTable',
  props: {
    data: Array,
    page: {
      type: Object,
      default: function() {
        return {
          page: 1,
          pageSize: 15,
          total: 0
        };
      }
    },
    defaultData: Boolean,
    statusTitle: {
      type: String,
      default: '状态'
    },
    status: {
      type: Boolean,
      default: false
    },
    statusProp: {
      type: String,
      default: 'status'
    },
    height: {
      type: String,
      default: '500'
    },
    isLimit: {
      type: Boolean,
      default: true
    },
    emptyText: {
      type: String,
      default: '暂无数据'
    },
    hideOnePage: {
      type: Boolean,
      default: false,
    },
    small: {
      type: Boolean,
      default: function() {
        if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
          return true;
        } else {
          return false;
        }
      }
    },
    pageLaout: {
      type: String,
      default: function() {
        if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
          return 'prev, pager, next';
        } else {
          return 'total, sizes, prev, pager, next, jumper';
        }
      }
    },
    Bottom: {
      type: Number,
      default: 0
    },
    showPage: {
      type: Boolean,
      default: true
    },
    isStatus: {
      type: Boolean,
      default: true
    },
    isOrder: {
      type: Boolean,
      default: false
    },
    hideScrollBar: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'medium'
    },
    headBg: {
      type: String,
      default: '#F8F8F9'
    }
  },
  data () {
    return {
      tableData: [],
      multipleSelection: [],
      pageData: {
        total: 1000,
        current_page: 1,
        per_page: 100,
        last_page: 1,
      },
      showEmptyTips: false,
    };
  },
  updated () {
    this.$nextTick(() => {
      this.$refs.table.doLayout();
    });
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      if (!_this.data) {
        _this.setDefaultData();
      }
      _this.setEmptyTips();
    });
  },
  methods: {
    setDefaultData () {
      let arr = [];

      for (let i = 0; i < 25; i++) {
        arr.push({
          id: i + 1,
          default: '默认值'
        });
      }

      this.tableData = arr;
    },
    // 点击分页按钮
    changePage (page) {
      this.$emit('changePage', { page });
    },
    // 改变每页显示记录数
    changeSize (limit) {
      if (this.isLimit) {
        this.pageSizeStore(limit);
      }
      this.$emit('changePage', { limit });
    },
    // 每一页pageSize持久化
    pageSizeStore (limit) {
      // this.$store.dispatch('worktab/setPageSize', { limit })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    filterTag (value, row) {
      return row[this.statusProp] === value;
    },
    setEmptyTips () {
      setTimeout(() => {
        this.showEmptyTips = true;
      }, 300);
    },
    // 表格间隔class
    tableRowClassName ({ row, rowIndex }) {
      return (rowIndex + 1) % 2 === 0 ? 'even-row' : 'odd-row';
    },
    doLayout () {
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },
  },
  watch: {
    data: {
      handler (newVal, oldVal) {
        this.$nextTick(() => {
          this.$refs.table.doLayout();
        });
      },
      immediate: true,
      deep: true,
    },
    page: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.pageData = newVal;
        }
      },
      immediate: true,
      deep: true,
    },
    multipleSelection: {
      handler (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.$emit('selectData', newVal);
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.tao-table {
  height: 100% !important;

  // 分页组件
  ::v-deep .el-pagination {
    margin: 20px 0 0 10px;
    padding-left: 0;
    text-align: right;
  }

  // 滚动条
  ::v-deep ::-webkit-scrollbar {
    height: 6px !important;
    display: block !important;
  }

  .empty {
    i {
      color: #d7d6d6;
      font-size: 40px;
    }

    p {
      color: #999999;
      font-size: 13px;
      line-height: 30px;
      margin-top: -10px;
    }
  }
}

.hide-scroll-bar {
  ::v-deep ::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }
}
</style>